<template>
  <view class="DiscussionList">
    <scroll-view
      v-if="discussionList.length"
      scroll-y="true"
      class="scroll"
      @scrolltolower="handleGetMoreData"
    >
      <view class="list">
        <DiscussionItem
          v-for="(item, index) in discussionList"
          :key="index"
          :itemDetail="item"
        />
      </view>
      <view class="full">没有更多讨论了</view>
    </scroll-view>
    <EmptyBox v-else />
  </view>
</template>

<script>
import DiscussionItem from "../../../components/home/DiscussionItem.vue";
import EmptyBox from "../../../components/public/EmptyBox.vue";
import { mapState } from "vuex";
export default {
  name: "DiscussionList",
  components: {
    DiscussionItem,
    EmptyBox,
  },

  mounted() {
    this.getDiscussionListData();
  },
  computed: { ...mapState("m_discussion", ["discussionList"]) },
  data() {
    return {
      showMask: false,
      isEnd: false,
      isMore: false,
      currentPage: 0,
    };
  },

  methods: {
    handleMask(flag) {
      this.showMask = flag;
    },

    async getDiscussionListData(page = 0, limitCount = 5) {
      const payload = { page, limitCount };
      try {
        await this.$store.dispatch("m_discussion/getDiscussionList", payload);
      } catch (err) {
        console.log(err);
      }
    },

    // 上拉获取更多
    async handleGetMoreData() {
      if (this.isEnd) {
        return;
      }
      if (this.isMore) {
        return;
      }
      uni.showLoading({
        title: "加载更多数据",
      });
      this.isMore = true;
      const page = ++this.currentPage,
        lastLength = this.discussionList.length;
      await this.$store.dispatch("m_discussion/getDiscussionList", {
        page,
        limitCount: 5,
      });
      const currentLength = this.discussionList.length;
      if (lastLength === currentLength) {
        this.isEnd = true;
      }
      this.isMore = false;
      uni.hideLoading();
      console.log("到达底部");
    },
  },
};
</script>

<style lang="scss" scoped>
.DiscussionList {
  box-sizing: border-box;
  padding: 20rpx 10rpx 180rpx 10rpx;
  width: 100%;

  .list {
    margin-top: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .scroll {
    width: 100%;
    height: calc(100vh - 280rpx);
  }
  .full {
    margin-top: 20rpx;
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    color: #999;
  }
}
</style>
